<template>
    <div class="collect-button" :class="{ collected: isCollected }">
        <el-space>
            <svg v-if="!isCollected" t="1748772294053"
                 class="icon"
                 @click="toggleCollect"
                 viewBox="0 0 1025 1024"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="1406"
                 width="20"
                 height="20">
                <path d="M512.118374 131.072L603.766374 317.44c20.48 41.472 59.392 70.144 104.96 76.8l205.824 30.208-148.992 145.92c-32.768 32.256-47.616 78.336-39.936 123.392l35.328 205.824-183.296-96.768c-19.968-10.752-42.496-16.384-65.024-16.384-22.528 0-45.056 5.632-65.024 16.384l-183.296 96.768 35.328-205.824c7.68-45.056-7.168-91.136-39.936-123.392L109.686374 424.448 314.998374 394.24c45.568-6.656 84.992-35.328 104.96-76.8l92.16-186.368m0-112.64c-20.48 0-41.472 10.752-51.712 32.256L346.742374 281.6c-8.192 16.896-24.576 29.184-43.52 31.744L49.270374 350.208C2.166374 357.376-16.777626 415.232 17.526374 449.024l183.808 180.224c13.312 13.312 19.968 32.256 16.384 51.2l-43.52 253.952c-6.144 37.376 23.552 67.584 56.832 67.584 8.704 0 17.92-2.048 27.136-6.656L484.982374 875.52c8.192-4.608 17.92-6.656 27.136-6.656 9.216 0 18.432 2.048 27.136 6.656l226.816 119.808c8.704 4.608 17.92 6.656 27.136 6.656 33.792 0 63.488-30.208 56.832-67.584l-43.52-253.952c-3.072-18.944 3.072-37.888 16.384-51.2l183.808-180.224c34.304-33.28 15.36-91.648-32.256-98.304l-253.952-36.864c-18.944-2.56-35.328-14.848-43.52-31.744L563.830374 50.688c-10.752-21.504-31.232-32.256-51.712-32.256z"
                      p-id="1407" fill="#8a8a8a"></path>
            </svg>
            <svg v-else
                 @click="toggleCollect"
                 t="1752508868755"
                 class="icon"
                 viewBox="0 0 1024 1024"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="1366" width="20" height="20">
                <path d="M1006.942208 391.708672c-2.10944-5.599232-7.458816-9.310208-13.459456-9.310208L672.516096 382.398464 526.367744 42.118144c-2.251776-5.26336-7.45472-8.675328-13.205504-8.675328-0.021504 0-0.043008 0-0.043008 0-5.772288 0-10.975232 3.45088-13.2096 8.762368L356.626432 382.399488 32.821248 382.399488c-5.983232 0-11.355136 3.709952-13.459456 9.271296-2.10944 5.604352-0.54784 11.91936 3.959808 15.880192L290.67264 642.930688l-88.240128 314.625024c-1.600512 5.72928 0.504832 11.880448 5.28896 15.418368 4.780032 3.53792 11.246592 3.791872 16.303104 0.590848l289.137664-184.52992 289.133568 184.52992c2.359296 1.514496 5.056512 2.230272 7.7312 2.230272 2.989056 0 5.961728-0.927744 8.489984-2.7392 4.780032-3.493888 6.928384-9.560064 5.413888-15.29344l-84.93568-319.50848L1002.939392 407.59296C1007.468544 403.633152 1009.047552 397.313024 1006.942208 391.708672z"
                      fill="#1296db"
                      p-id="1367">
                </path>
            </svg>
            <span>{{ parseInt(collectionCount) }}</span>
        </el-space>

    </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {useCollectStore} from '@/stores/collectStore.js';
import debounce from '@/tools/debounce.js';

const props = defineProps({
    postId: {
        type: String,
        required: true
    }
});

const collectStore = useCollectStore();
const isCollected = ref(false);
const collectionCount = ref(0);

// 切换收藏状态
const toggleCollect = debounce(async () => {
    if (isCollected.value) {
        await collectStore.unCollect(props.postId);
    } else {
        await collectStore.collect(props.postId);
    }

    // 更新本地状态
    isCollected.value = !isCollected.value;
    collectionCount.value = await collectStore.getCollectCount(props.postId);
}, 300);

onMounted(async () => {
    // 初始化收藏状态和数量
    isCollected.value = await collectStore.checkHasCollected(props.postId);
    collectionCount.value = await collectStore.getCollectCount(props.postId);
});
</script>

<style scoped>
.collect-button {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: #888;
}

.collect-button.collected {
    color: #1296db;
}
</style>
